<template>
  <h2>当前的x是:{{x.y}}</h2>
  <button @click="x++">点我x+1</button>
  <hr>
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>展示薪水:{{job.j1.salery}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salery++">涨薪</button>
</template>

<script>
// TODO shallowReactive(浅层次的响应式)和shallowRef(当传的值是对象类型的就不奏效了,普通类型和ref没影响)-----使用的时候再导入
import {toRefs,reactive, shallowRef} from "vue";

export default {
  name: 'Demo',
  setup() {
    //数据
    //let person = shallowReactive({  //只考虑第一层数据的响应式
      let person = reactive({
      name: '张三',
      age: 18,
      job:{
        j1:{
          salery:20
        }
      }
    })

let x = shallowRef({
  y:0
})
    return{
        x,
      ...toRefs(person)
    }
  }
}
</script>

<style>
</style>
